import React, { useState, useMemo, Children } from 'react';

function Memo() {
  const [Kobe, setKobe] = useState('Kobe 在打篮球')
  const [James, setJames] = useState('James 在打篮球')
  return (
    <>
      <button onClick={() => setKobe(new Date().toLocaleString() + '，')}>Kobe</button>
      <button onClick={() => setJames(new Date().toLocaleString() + '，' + 'James 要和我 PK')}>James</button>
      <ChildComponent name={Kobe}>{James}</ChildComponent>
    </>
  )
}

function ChildComponent({ name, children }) {
  // 父组件的每次更新都会调用子组件的方法进行重复渲染，性能消耗大
  function changeKobe() {
    console.log('Kobe 要锤爆你');
    return name + 'Kobe 要和我 PK'
  }
  /* 
    useMemo 解决性能问题
    第一个参数：调用的方法
    第二个参数：变化条件
  */
  const actionKobe = useMemo(()=>changeKobe(name), [name]) 
  return (
    <>
      <p>{actionKobe}</p>
      <p>{children}</p>
    </>
  )
}

export default Memo
